<template>
  <div>
    <div class="top">
      <van-icon name="arrow-left"  @click="back"/>
      <SearchBox></SearchBox>
      <van-icon name="guide-o" />
    </div>
 <van-sticky>
 <van-dropdown-menu  active-color="rgba(76, 189, 135)">

<van-dropdown-item title="区域"   ref="areaItem">
<van-area  :area-list="areaTrueList"  value="110101"  @cancel="closeAreaSubmit" @confirm="areaSubmit" ref="areaForm" />
  </van-dropdown-item>
<van-dropdown-item title="方式"  ref="rentTypeItem">
<van-picker show-toolbar :columns="rentType.list"  @cancel="closeRentTypeSubmit" @confirm="rentTypeSubmit" ref="rentTypeForm"/>
  </van-dropdown-item>
  <van-dropdown-item title="租金" ref="priceItem">
<van-picker show-toolbar :columns="price.list"  @cancel="closePriceSubmit" @confirm="PriceSubmit" ref="priceForm"/>
  </van-dropdown-item>
  <van-dropdown-item title="筛选" @open="showPopup">
  </van-dropdown-item>
</van-dropdown-menu>
<!-- 右侧弹窗 -->
<van-popup position="right"  v-model="show"  :style="{ left:'80px',width:'100%', height: '100%',backgroundColor:'#fff'}">
  <dl class="RightPopupWindow" @click="popupClickFn">
   <div>
     <dt>户型</dt>
  <dd><span v-for="item in bodyList.roomType" :key="item.value" :data-id="item.value">{{item.label}}</span></dd>
   </div>
     <div>
     <dt>朝向</dt>
   <dd><span v-for="item in bodyList.oriented" :key="item.value" :data-id="item.value">{{item.label}}</span></dd>
   </div>
     <div>
     <dt>楼层</dt>
      <dd><span v-for="item in bodyList.floor" :key="item.value" :data-id="item.value">{{item.label}}</span></dd>
   </div>
  <div>
     <dt>房屋亮点</dt>
     <dd><span v-for="item in bodyList.characteristic" :key="item.value" :data-id="item.value">{{item.label}}</span></dd>
   </div>
  </dl>

</van-popup>
</van-sticky>
<div class="content">
<van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
<HouseItem v-for="item in list" :key="item.houseCode" :item="item"></HouseItem>
</van-list>
</div>
<!-- 表单按钮 -->
<div class="footer" v-show="btnShow">
   <van-button plain square type="primary" @click="popupClearFn">清除</van-button>
  <van-button type="primary" square  color="#21b97a" @click="submit">确认</van-button>
</div>
  </div>
</template>

<script>
import { findHouseList, getCityesHousesInfo } from '@/api/house'
import { getToken } from '@/utils/cityStorage'
export default {
  name: 'FindIndex',
  data () {
    return {
      // 总的数据
      bodyList: {

      },
      btnShow: false,
      show: false,
      // 区域的一些列表
      areaList: [],
      areaCitylist: [],
      areaCountyList: [],
      // 地铁的一些列表
      subway: {
        subwayList: [],
        subwayNameList: [],
        siteList: []
      },
      // 整租方式
      rentType: {
        dataList: [],
        list: []
      },
      // 价格
      price: {
        dataList: [],
        list: []
      },
      // 渲染区域下拉菜单列表
      areaTrueList: {
        province_list: {
          110000: '区域',
          120000: '地铁'
        },
        city_list: {

        },
        county_list: {
        }
      },
      list: [],
      loading: false,
      finished: false,
      toastFlag: true,
      // 找房的筛选对象
      findHousesObj: {
        cityId: 'AREA|dbf46d32-7e76-1196',
        star: 1,
        end: 20
      }
    }
  },

  async  created () {
    // 获取筛选条件
    // 筛选区域
    let i = 110100
    const areaRes = await getCityesHousesInfo(this.findHousesObj.cityId)
    console.log(areaRes)
    this.areaList = areaRes.data.body.area.children
    this.areaCitylist = this.areaList.map(item => item.label)
    this.areaCitylist.forEach((ele) => {
      this.areaTrueList.city_list[i] = ele
      i = i + 100
    })
    this.areaList.forEach(item => {
      if (item.children) this.areaCountyList.push(item.children.map(item1 => item1.label))
    })
    let y = 110201
    let z = 0
    this.areaCountyList.forEach(item => {
      item.forEach(item1 => {
        z = item.length
        this.areaTrueList.county_list[y] = item1
        y++
      })
      y = y - z
      y = y + 100
    })

    // 筛选地铁
    this.subway.subwayList = areaRes.data.body.subway.children
    this.subway.subwayNameList = this.subway.subwayList.map(item => item.label)
    let s = 120100
    this.subway.subwayNameList.forEach((ele) => {
      this.areaTrueList.city_list[s] = ele
      s = s + 100
    })
    this.subway.subwayList.forEach(item => {
      if (item.children) this.subway.siteList.push(item.children.map(item1 => item1.label))
    })
    let w = 120201
    let b = 0
    this.subway.siteList.forEach(item => {
      item.forEach(item1 => {
        b = item.length
        this.areaTrueList.county_list[w] = item1
        w++
      })
      w = w - b
      w = w + 100
    })
    // 筛选整租
    this.rentType.dataList = areaRes.data.body.rentType
    this.rentType.list = this.rentType.dataList.map(item => item.label)
    // 筛选价格
    this.price.dataList = areaRes.data.body.price
    this.price.list = this.price.dataList.map(item => item.label)
    // 筛选数据渲染
    this.bodyList = areaRes.data.body
  },
  watch: {
    show (newValue) {
      if (newValue === true) {
        setTimeout(() => {
          this.btnShow = newValue
        }, 300)
      } else {
        this.btnShow = newValue
      }
    }
  },
  methods: {
    // 渲染事件
    async  render () {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      const res = await findHouseList(this.findHousesObj)
      this.list = res.data.body.list
      this.$toast.loading({
        duration: 1
      })
      if (this.toastFlag) {
        this.$toast(`共找到${res.data.body.count}套房源`)
        this.toastFlag = false
      }
      if (this.findHousesObj.end > res.data.body.count) this.finished = true
    },
    // 提交筛选数据事件
    submit () {
      const list = []
      document.querySelectorAll('.span-active').forEach(item => {
        list.push(item.dataset.id)
      })
      this.findHousesObj.more = list.join(',')
      this.show = false
      // 渲染
      this.render()
    },
    // 点击筛选事件
    popupClickFn (e) {
      if (e.target.tagName === 'SPAN') {
        e.target.classList.toggle('span-active')
      }
    },
    // 清除筛选事件
    popupClearFn () {
      document.querySelectorAll('.span-active').forEach(item => {
        item.classList.remove('span-active')
      })
    },
    // 租金筛选事件
    showPopup () {
      this.show = true
    },
    async   PriceSubmit (data) {
      this.toastFlag = true
      this.finished = false
      const value = this.price.dataList.find(item => item.label === data).value
      this.findHousesObj.price = value
      this.$refs.priceItem.toggle()
      // 渲染
      this.render()
    },
    // 整租筛选事件
    async  rentTypeSubmit (data) {
      this.toastFlag = true
      this.finished = false
      const value = this.rentType.dataList.find(item => item.label === data).value
      this.findHousesObj.rentType = value
      this.$refs.rentTypeItem.toggle()
      // 渲染
      this.render()
    },
    // 关闭租金表单
    closePriceSubmit () {
      this.$refs.priceItem.toggle()
      this.$refs.priceForm.reset()
    },
    // 关闭整租表单
    closeRentTypeSubmit () {
      this.$refs.rentTypeItem.toggle()
      this.$refs.rentTypeForm.reset()
    },
    // 关闭区域表单
    closeAreaSubmit () {
      this.$refs.areaItem.toggle()
      this.$refs.areaForm.reset()
    },
    // 区域表单事件
    async  areaSubmit (data) {
      this.toastFlag = true
      this.finished = false
      if (data[0].code === '110000') {
        if (data[1].name === '不限') {
          this.findHousesObj.area = null
        } else {
          if (data[2].name === '不限') {
            this.findHousesObj.area = this.areaList.find(item => item.label === data[1].name).value
          } else {
            this.findHousesObj.area = this.areaList.find(item => item.label === data[1].name).children.find(item => item.label === data[2].name).value
          }
        }
      } else {
        if (data[1].name === '不限') {
          return this.$refs.areaItem.toggle()
        } else {
          if (data[2].name === '不限') {
            this.findHousesObj.subway = this.subway.subwayList.find(item => item.label === data[1].name).value
          } else {
            this.findHousesObj.subway = this.subway.subwayList.find(item => item.label === data[1].name).children.find(item => item.label === data[2].name).value
          }
        }
      }
      this.$refs.areaItem.toggle()
      // 渲染
      this.render()
    },
    back () {
      window.history.back()
    },
    onConfirm () {
      console.log(this.switch1, this.switch2)
    },
    async onLoad () {
      this.finished = false
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      if (getToken()) {
        this.findHousesObj.cityId = JSON.parse(getToken()).value
      }
      const res = await findHouseList(this.findHousesObj)
      this.$toast.loading({
        duration: 1
      })
      if (this.toastFlag) {
        this.$toast(`共找到${res.data.body.count}套房源`)
        this.toastFlag = false
      }
      if (this.findHousesObj.end > res.data.body.count) this.finished = true
      this.findHousesObj.star = this.findHousesObj.star + 20
      this.findHousesObj.end = this.findHousesObj.end + 20
      console.log(res)
      this.loading = false
      this.list.push(...res.data.body.list)
    }
  }
}
</script>

<style lang="less" scoped>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  line-height: 1.5;

}
.top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    height: 45px;
    background-color: rgba(76, 189, 135);
    .van-icon-arrow-left{
      font-size: 18px;
    color: #fff;
    }
      .van-icon-guide-o{
    font-size: 25px;
    color: #fff;
    }

}
.content{
  padding: 0 15px;
  padding-bottom: 50px;
}
.RightPopupWindow{
  padding: 0 15px;
  margin: 15px 0;
  padding-bottom:40px ;

  dt{
    margin: 20px 0;
    font-size: 15px;
  }
 dd{
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 14px;
   span{
    display: inline-block;
    height: 32px;
    width: 70px;
    margin: 0 18px 15px 0;
    border: 1px solid #ddd;
    border-radius: 3px;
    line-height: 32px;
    text-align: center;
    font-size: 12px;
    color: #888;
    &.span-active{
    border: 1px solid #21b97a;
    color: #21b97a;
    background-color: #defaef
    }
 }
}
  div:last-child{
      dd{
        border: none;
      }
  }
}
.footer {
  display: flex;
  position: fixed;
  z-index: 99999;
  bottom: 0;
  right: 0;
  left: 80px;
  button:nth-child(1){
    flex:1
  }
    button:nth-child(2){
    flex:2
  }
}
</style>
